<%@ page pageEncoding="utf-8" import="java.util.*" %>
<%@ page import="com.listener.pojo.Pokemon" %>
<%@ page import="com.listener.pojo.Page" %>
<%@ page import="com.listener.pojo.Move" %>
<%@ page import="com.listener.pojo.Ability" %>
<html>
<head>
    <jsp:include page="head.jsp">
        <jsp:param name="title" value="特性列表"/>
    </jsp:include>
</head>
<body class="pageTable">

<jsp:include page="/web/nav.jsp">
    <jsp:param name="fun" value="ability"/>
</jsp:include>
<%
    Ability abilityCondition = (Ability) request.getSession().getAttribute("abilityCondition");
    Page<Ability> pages= (Page<Ability>) request.getAttribute("abilityPage");
    List<Ability> abilityList=pages.getPage();
%>
<div class="row">
    <div class="col-md-2">
        <button onclick="goBack()"  class="backButton" >返回</button>
    </div>
    <div class="col-md-8">
        <div class="pageSearch">
            <form action="<%=request.getContextPath()%>/selectAbilityPage" method="post" >
                特性名称：<input type="text" name="ability"
                            value="<%=(abilityCondition!=null && abilityCondition.getAbility()!=null)?abilityCondition.getAbility():""%>">&nbsp&nbsp&nbsp&nbsp
                描述：<input type="text" name="description"
                value="<%=(abilityCondition!=null && abilityCondition.getDescription()!=null)?abilityCondition.getDescription():""%>">&nbsp&nbsp&nbsp&nbsp
                <input class="btn btn-default" type="submit" value="查询">
            </form>
        </div>
        <table border="2px black" style="width: 100%;">
            <tr class="abilityTh">
                <th>编号</th>
                <th>特性</th>
                <th>描述</th>
                <th>wiki链接</th>
            </tr>
            <%
                if(abilityList!=null && abilityList.size()>0)
                {
                    for(Ability ability: abilityList){
            %>
            <tr class="abilityTr">
                <td><%=ability.getAbilityId()%></td>
                <td><%=ability.getAbility()%></td>
                <td><%=ability.getDescription()%></td>
                <td>
                    <a href="<%=ability.getWikiUrl()%>" title="前往wiki查看关于【<%=ability.getAbility()%>】的更多事情">
                        <%=ability.getAbility()%>-wiki
                    </a>
                </td>
            </tr>
            <%
                }
            %>

            <%
                }
            %>
        </table>
        <form action="<%=request.getContextPath()%>/selectAbilityPage" method="post">
            <ul class="pagination justify-content-center" >
                <li class="page-item <%=(pages.getPageNum()!=1)?"":"disabled"%>"><a class="page-link"
                                                                                    href="<%=request.getContextPath()%>/selectAbilityPage?pageNum=<%=pages.getPageNum()-1%>"
                >上一页</a></li>
                <li class="page-item disabled">
                    <a class="page-link" href="#">
                        当前第<%=pages.getPageNum()%>页&nbsp;共<%=pages.getPageSum()%>页</a>
                </li>
                <li class="page-item">
                    <p class="page-link">
                        <input  type="submit" value="跳转到" style="background-color: white;border: none">
                        第<input id="pageNumInput" type="text" name="pageNum" style="height: 18px;width: 40px;text-align: center" value="<%=pages.getPageNum()%>">页</p>
                </li>
                <li class="page-item <%=(pages.getPageNum()!=pages.getPageSum())?"":"disabled"%>"><a class="page-link"
                                                                                                     href="<%=request.getContextPath()%>/selectAbilityPage?pageNum=<%=pages.getPageNum()+1%>"
                >下一页</a></li>
            </ul>
        </form>
    </div>
    <div class="col-md-2"></div>
    <script>

        function goBack() {
            window.history.back();
        }
        $().ready(function(){
            $("#pageNumInput").blur(function(){
                if(!Number.isInteger(+$(this).val()))
                {
                    $(this).val(<%=pages.getPageNum()%>);
                }else{
                    let number=+$(this).val();
                    if(number<1 || number><%=pages.getPageSum()%>){
                        $(this).val(<%=pages.getPageNum()%>);
                    }
                }
            })
        });
    </script>
</div>
</body>
</html>
